<template>
  <h1></h1>
  <!-- <span></span> -->
  <div v-show="false" style="position: absolute;">
    <vxe-grid ref="xGridPrinter" v-bind="gridPrinterOptions"/>
  </div>
</template>
<script lang="tsx" name="InboundPrinter" setup>
import { reactive, ref } from 'vue';
import { VxeGridProps } from 'vxe-table';
import XEUtils from 'xe-utils';
import { printColumns, printStyle, wrap } from "./data";
import { BillItem } from "/@/api/wms/wms-model";

const xGridPrinter = ref()
const gridPrinterOptions = reactive<VxeGridProps>({
  id: 'printer',
  border: true,
  stripe: true,
  // maxHeight: window.innerHeight - 320,
  keepSource: false,
  loading: false,
  resizable: false,
  showFooter: true,
  showOverflow: false,
  highlightCurrentRow: false,
  highlightHoverRow: false,
  highlightCurrentColumn: false,
  highlightHoverColumn: false,
  // emptyRender: {name: 'NotDataOfSelectGoods', events: {click: ()=> modalOfGoods.data.show = true},},
  rowConfig: {
    useKey: true,
    isCurrent: false,
    isHover: true,
    keyField: 'goodsId',
  },
  columnConfig: {
    useKey: true,
    isCurrent: false,
    isHover: true,
  },
  customConfig: {
    storage: false,
  },
  sortConfig: {
    trigger: 'default',
    remote: false
  },
  filterConfig: {
    remote: false
  },
  footerMethod: ({columns, data,}) => {
    if (data.length === 0) {
      return []
    }
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        }
        if (['qty'].includes(column.field)) {
          let sum = data.reduce((pre, cur,)=>{
            return pre + Number(cur['qty']);
          }, 0)
          return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 1, });
        }
        if (['amount'].includes(column.field)) {
          let sum = data.reduce((pre, cur,)=>{
            return pre + Number(cur['amount']);
          }, 0)
          return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 2, });
        }
        return null
      }),
    ]
  },
  columns: printColumns,
  // data: [] as any[],
})

defineExpose({
  handlePrintOne(row:BillItem) {
    // console.log(row)
    const $table = xGridPrinter.value
    if ($table) {
      $table.print({
        sheetName: '打印',
        isHeader: true,
        isFooter: true,
        style: printStyle,
        columns: printColumns,
        data: row.goodsList,
        beforePrintMethod: ({ content }) => {
          $table.updateFooter()
          return wrap(row).topHtml + content + wrap(row).bottomHtml
        }
      })
    }
  },
});
</script>

<style scoped>
</style>
